<template>
    <section class="component-box">

        <div class="center-container">
            <img src="https://www.scvtc.edu.cn/images/logo.png">
            <menu class="menu">
                <el-dropdown v-for="item in listData" :key="item.id" style="padding-top: 14px;" >
                    <span class="el-dropdown-link"><a :href=item.hr>
                      {{ item.name }}</a>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item v-for="i,i2 in item.zi" :key="i2">
                           <a   :href="item.zia[i2]">  {{i}}</a>
                        </el-dropdown-item>
                        
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
               
            </menu>
        </div>
    </section>

   
     <!-- <li v-for="item in listData" :key="item.id">
                    <a :href=item.hr>
                    {{ item.name }}
                </a></li> -->
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue';
import { it } from 'element-plus/es/locale';
const listData = [
    {
        id:1,
        name:"首页",
        hr:"https://www.scvtc.edu.cn/",
        zi:[''],
        zia:['#']
    },
    {
        id:2,
        name:"学院概况",
        hr:"https://www.scvtc.edu.cn/xygk.htm",
        zi:['历史沿革','学院标识','历任领导','现任领导','地理位置','校园风光','学校地图','学院章程'],
        zia:['https://www.scvtc.edu.cn/xygk/lsyg.htm',
        'https://www.scvtc.edu.cn/xygk/xybs.htm',
        'https://www.scvtc.edu.cn/xygk/lrld.htm',
        'https://www.scvtc.edu.cn/xygk/xrld.htm',
        'https://www.scvtc.edu.cn/xygk/dlwz.htm',
        'https://www.scvtc.edu.cn/xygk/xyfg.htm',
        'https://www.scvtc.edu.cn/xygk/xxdt.htm',
        'https://www.scvtc.edu.cn/xygk/xyzc.htm']
    },
    {
        id:3,
        name:"机构设置",
        hr:"https://www.scvtc.edu.cn/jgsz.htm",
        zi:['管理服务单位','教育教学单位','教辅服务单位','经济发展单位','科研成果转换单位'],
        zia:['https://www.scvtc.edu.cn/jgsz/glfwdw.htm',
        'https://www.scvtc.edu.cn/jgsz/jyjxdw.htm',
        'https://www.scvtc.edu.cn/jgsz/jffwdw.htm',
        'https://www.scvtc.edu.cn/jgsz/jjfzdw.htm',
        'https://www.scvtc.edu.cn/jgsz/kycgzhdw.htm',]
    },
    {
        id:4,
        name:"教学管理",
        hr:    "https://jwc.scvtc.edu.cn/",
        zi:['教务处'],
        zia:['http://jwc.scvtc.edu.cn/']
    },
    {
        id:5,
        name:"科学研究",
        hr:"https://kyc.scvtc.edu.cn/",
        zi:['科技与产教融合处'],
        zia:['https://kyc.scvtc.edu.cn/']
    },
    {
        id:6,
        name:"招生就业",
        hr: "https://zsc.scvtc.edu.cn/",
        zi:['招生网','就业网','单招网','就业登记系统'],
        zia:['http://zsc.scvtc.edu.cn/',
        'http://scvtc.university-hr.com/',
        'http://ddzs.scvtc.edu.cn/',
        'https://wq.ncss.cn/']
    },
    {
        id:7,
        name:"合作交流",
        hr:"https://www.scvtc.edu.cn/#",
        zi:['国际交流','校企交流'],
        zia:['https://www.scvtc.edu.cn/hzjl1/gjjl.htm',
        'https://www.scvtc.edu.cn/hzjl1/xqhz.htm']
    },
    {
        id:8,
        name:"数字办公",
        hr:"https://ydcw.scvtc.edu.cn/jy?agyCode=12970&admCode=510900",
        zi:['融合门户','OA系统','全媒体管理平台','网查系统','网上缴费'],
        zia:['https://ehall.scvtc.edu.cn/login',
        'https://oa.scvtc.edu.cn/',
        'https://zqgl.scvtc.edu.cn/system/login.jsp',
        'https://ydcw.scvtc.edu.cn/jy?agyCode=12970&admCode=510900',
        'http://cwxt.scvtc.edu.cn:8011/clientapp/index_jm.jsp']
    },
    {
        id:9,
        name:"公共服务",
        hr:"https://www.scvtc.edu.cn/",
        zi:['学院公告','学院新闻','招标投标','学院校历','校车时刻','校园微信','VIS手册','推荐站点'],
        zia:['https://www.scvtc.edu.cn/ggfw1/xygg.htm',
        'https://www.scvtc.edu.cn/ggfw1/xyxw.htm',
        'https://www.scvtc.edu.cn/ggfw1/zbtb.htm',
        'https://www.scvtc.edu.cn/ggfw1/xyxl.htm',
        'https://www.scvtc.edu.cn/ggfw1/xcsk.htm',
        'https://www.scvtc.edu.cn/ggfw1/xywx.htm',
        'https://www.scvtc.edu.cn/ggfw1/VISsc.htm',
        'https://www.scvtc.edu.cn/ggfw1/tjzd.htm']
    },
    {
        id:10,
        name:"信息公开",
        hr:"https://www.scvtc.edu.cn/xxgk.htm",
        zi:['书记校长信箱','财务信息公开','质量管理处报告','国家信息公开制度','学校信息公开制度','信息公开指南','信息公开目录'],
        zia:['https://www.scvtc.edu.cn/xxgk/sjxzxx.htm','https://www.scvtc.edu.cn/xxgk/cwxxgk.htm',
        'https://www.scvtc.edu.cn/xxgk/zlglcbg.htm','https://www.scvtc.edu.cn/xxgk/gjxxgkzd.htm',
        'https://www.scvtc.edu.cn/xxgk/xxxxgkzd.htm','https://www.scvtc.edu.cn/xxgk/xxgkzn.htm',
        'https://www.scvtc.edu.cn/xxgk/xxgkml.htm']
    },
    ];
   
</script>

<script>

</script>

<style scoped lang="scss">
.el-dropdown-menu{
    justify-content: space-between;
    text-align: left;
    align-self:center;
    width: 220px;
    display:flex;
    flex-wrap: wrap;
    .el-dropdown-item{
       background-color: rgba($color: #fff, $alpha: 0.8);
        width: 80px;

    }
}


.el-dropdown{
    padding-left: 14px;
    font-size: 17px;
    color: black;
    el-dropdown:hover{
        color: red;
    }
}
.component-box {
    padding-top: 14px;
    padding-bottom: 20px;
 border-bottom: 7px solid #921C1C;
    .center-container {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .menu {
            display: flex;

            el-dropdown:nth-child(n + 2) {
                margin-left: 20px;
            }
            el-dropdown:hover{
                color: red;
            }
            
        }
    }
    .example-showcase .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
      }
      .example-showcase .el-dropdown-link:hover {
       color: red;
      }
}
</style>